<script setup lang='ts'>
import HorizontalBar from './components/HorizontalBar.vue'
import VerticalBar from './components/VerticalBar.vue'
import MapChart from './components/MapChart.vue'
import RadarBar from './components/RadarBar.vue'
import Relation from './components/Relation.vue'
import WordCloud from './components/WordCloud.vue'
import RingBar from './components/RingBar.vue'
import TotalData from './components/TotalData.vue'

import { getVisualization} from './api/visualization'
import { ref,onMounted } from 'vue'

const data = ref(null)

const loadData = async() =>{
  data.value = await getVisualization()
}

loadData()

setInterval(() => {
  loadData()
}, 3000);

</script>

<template>
<div class="bg-[url('assets/imgs/bg.jpg')] bg-cover h-screen p-5 text-white bg-center flex overflow-hidden" v-if="data">
  <!-- 上 -->
  <div class="flex-1 mr-5 p-3 bg-opacity-50 bg-slate-800 flex flex-col">
    <!-- 横向柱状图 -->
    <HorizontalBar class="h-1/3 box-border pb-4" :data="data.regionData"/>
    <!-- 雷达图 -->
    <RadarBar class="h-1/3 box-border pb-4" :data="data.riskData"/>
    <!-- 数据传递关系图 -->
    <Relation class="h-1/3" :data="data.relationData"/>
  </div>
  <!-- 中 -->
  <div class="w-1/2 mr-5 flex flex-col">
    <!-- 数据总览 -->
    <TotalData class="bg-opacity-50 bg-slate-800 p-3" :data="data.totalData"/>
    <!-- 地图可视化 -->
    <MapChart class="bg-opacity-50 bg-slate-800 p-3 mt-4 flex-1" :data="data.mapData"/> 
  </div>
  <!-- 下 -->
  <div class="flex-1 p-3 bg-opacity-50 bg-slate-800 flex flex-col">
    <!-- 竖向柱状图 -->
    <VerticalBar class="h-1/3 box-border pb-4" :data="data.serverData"/>
    <!-- 环形图 -->
    <RingBar class="h-1/3 box-border pb-4" :data="data.abnormalData"/>
    <!-- 文档云图 -->
    <WordCloud class="h-1/3" :data="data.wordCloudData"/>
  </div>
</div>

</template>

<style scoped>

</style>